// 加载layui模块
var form = layui.form; //加载表单模块,用来做数据回填


// -------------------1. 把友情链接列表渲染到页面----------------------
function renderLink() {
    $.ajax({
        url: 'http://localhost:8888/admin/links',
        // headers: {
        //     Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWQiOjEsImlhdCI6MTU5OTQ4MTMzMSwiZXhwIjoxNTk5NDg0OTMxfQ.E4SrhRXjC0f9A0xthLdTS8CSEFsuWBWXnMH0-zYPIyc'
        // },
        headers: {
            Authorization: localStorage.getItem('token')
        },
        success: function (res) {
            if (res.status === 0) {
                // console.log(res); //获取链接信息成功
                var html = template('tbody-tpl', res);
                $('tbody').html(html);
            }
        }
    });
}
renderLink();


// -------------------2. 添加功能----------------------------------
$('button:contains("添加链接")').click(function () {
    // 使用layui写弹窗
    var index = layer.open({
        type: 1, //1是页面层
        title: '添加友情链接',
        content: $('#add-tpl').html(), //内容是html页面中的add模板
        area: ['480px', '350px'] //宽高
    });
    // 文件上传按钮连带隐藏的文件上传input
    $('#icon-url').click(function () {
        $('#icon-file').click();
    });
    // 文件选中,触发change事件,icon要预览
    $('#icon-file').change(function () {
        var iconURL = URL.createObjectURL(this.files[0]); //为上传的文件创建临时地址
        $('#icon-pre').attr('src', iconURL);
    });
    // 收集表单数据并提交
    $('#add-form').submit(function (e) {
        e.preventDefault(); //阻止表单默认事件
        // 因为有文件上传,所以用FormData格式
        var fd = new FormData(this);
        $.ajax({
            type: 'POST',
            url: 'http://localhost:8888/admin/links',
            data: fd,
            // headers: {
            //     Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWQiOjEsImlhdCI6MTU5OTQ4MTMzMSwiZXhwIjoxNTk5NDg0OTMxfQ.E4SrhRXjC0f9A0xthLdTS8CSEFsuWBWXnMH0-zYPIyc'
            // },
            headers: {
                Authorization: localStorage.getItem('token')
            },
            processData: false, //不要把对象形式的fd转换成查询字符串形式
            contentType: false, //不要加默认的请求头
            success: function (res) {
                layer.msg(res.message);
                if (res.status === 0) {
                    // 添加成功,关闭窗口,重新渲染页面
                    layer.close(index);
                    renderLink();
                }
            }
        });

    });
});


// -------------------3. 编辑功能----------------------------------
// 编辑功能和添加基本一样,只多了一个数据回填和重置应该变成原来的而不是清空
$('tbody').on('click', 'button:contains("编辑")', function () {
    // 获取id
    var id = $(this).data('id');
    // // 使用layui写弹窗
    var index = layer.open({
        type: 1, //1是页面层
        title: '编辑友情链接',
        content: $('#edit-tpl').html(), //内容是html页面中的add模板
        area: ['480px', '350px'] //宽高
    });
    // 先获取数据做数据回填
    function huitian() {
        $.ajax({
            url: 'http://localhost:8888/admin/links/' + id,
            // headers: {
            //     Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWQiOjEsImlhdCI6MTU5OTQ4MTMzMSwiZXhwIjoxNTk5NDg0OTMxfQ.E4SrhRXjC0f9A0xthLdTS8CSEFsuWBWXnMH0-zYPIyc'
            // },
            headers: {
                Authorization: localStorage.getItem('token')
            },
            success: function (res) {
                // console.log(res);
                // 数据回填
                $('#icon-pre').attr('src', 'http://localhost:8888/uploads/' + res.data.linkicon).addClass('image'); //显示图片
                // form.val("editlink", { 
                //     "linkicon": ''
                // });
                delete res.data.linkicon; //这里不会,看的老师的
                form.val("editlink", res.data); //layui的表单回填---获取数据
            }
        });
    }
    huitian();
    // 文件上传按钮连带隐藏的文件上传input
    $('#icon-url').click(function () {
        $('#icon-file').click();
    });
    // 文件选中,触发change事件,icon要预览
    $('#icon-file').change(function () {
        var iconURL = URL.createObjectURL(this.files[0]); //为上传的文件创建临时地址
        $('#icon-pre').attr('src', iconURL);
    });
    // 收集表单数据并提交
    $('#edit-form').submit(function (e) {
        e.preventDefault(); //阻止表单默认事件
        // 因为有文件上传,所以用FormData格式
        var fd = new FormData(this);
        $.ajax({
            type: 'PUT',
            url: 'http://localhost:8888/admin/links/' + id,
            data: fd,
            // headers: {
            //     Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWQiOjEsImlhdCI6MTU5OTQ4MTMzMSwiZXhwIjoxNTk5NDg0OTMxfQ.E4SrhRXjC0f9A0xthLdTS8CSEFsuWBWXnMH0-zYPIyc'
            // },
            headers: {
                Authorization: localStorage.getItem('token')
            },
            processData: false, //不要把对象形式的fd转换成查询字符串形式
            contentType: false, //不要加默认的请求头
            success: function (res) {
                layer.msg(res.message);
                if (res.status === 0) {
                    // 编辑成功,关闭窗口,重新渲染页面
                    layer.close(index);
                    renderLink();
                }
            }
        });

    });
    // 点击重置按钮不清空表单,而是回到之前的样子....有点问题
    $('button:contains("重置")').click(function (e) {
        // 阻止默认行为
        e.preventDefault();
        // 渲染成原来的样子
        huitian();
    });
})


// -------------------4. 删除功能----------------------------------
$('tbody').on('click', 'button:contains("删除")', function () {
    // 获取id
    var id = $(this).data('id');
    // console.log(id);  //链接id
    layer.confirm('你确定删除这条友情链接?', function (index) {
        //发送ajax,实现删除并渲染
        $.ajax({
            url: 'http://localhost:8888/admin/links/' + id,
            type: 'DELETE',
            // headers: {
            //     Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWQiOjEsImlhdCI6MTU5OTQ4MTMzMSwiZXhwIjoxNTk5NDg0OTMxfQ.E4SrhRXjC0f9A0xthLdTS8CSEFsuWBWXnMH0-zYPIyc'
            // },
            headers: {
                Authorization: localStorage.getItem('token')
            },
            success: function (res) {
                layer.msg(res.message);
                if (res.status === 0) {
                    renderLink(); //删除成功,重新渲染页面
                }
            }
        });

        layer.close(index);
    });

});


// ---------------------5. 根据id查询友情链接----------------------